<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/1/16
  Time: 16:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="${pageContext.request.contextPath}/statics/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/assets/css/ace.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css"/>
    <script src="${pageContext.request.contextPath}/statics/assets/js/ace-extra.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-1.9.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/assets/layer/layer.js" type="text/javascript"></script>
    <title>登录</title>
</head>

<body class="login-layout Reg_log_style" style="background: url(${pageContext.request.contextPath}/statics/images/login_bg.png);">
<div class="logintop">
    <span>欢迎后台管理界面平台</span>
    <ul>
        <li><a href="#">返回首页</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>
<div class="loginbody">
    <div class="login-container">
        <div class="center"></div>
        <div class="space-6"></div>

        <div class="position-relative">
            <div id="login-box" class="login-box widget-box no-border visible" style="margin-top: 50px;">
                <div class="widget-body" >
                    <div class="widget-main" >
                        <h4 class="header blue lighter bigger">
                            <i class="icon-coffee green"></i>
                            管理员登录
                        </h4>

                        <div class="login_icon"><img src="${pageContext.request.contextPath}/statics/images/login.png" /></div>

                        <form class="" method="post" enctype="application/x-www-form-urlencoded">
                            <fieldset>
                                <ul>
                                    <div style="display: none;color: red" id="info">用户名或密码错误</div>
                                    <div style="display: none;color: red" id="codeinfo">验证码错误</div>
                                    <li class="frame_style form_error">
                                        <label class="user_icon"></label>
                                        <input name="loginName" type="text"  id="username"/><i>用户名</i>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="password_icon"></label>
                                        <input name="loginPwd" type="password" id="userpwd"/><i>密码</i>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="Codes_icon"></label>
                                        <input name="imgcodetext" type="text" id="imgcodetext" style="width: 160px" /><i>验证码</i>
                                        <div class="Codes_region">
                                            <img src="${pageContext.request.contextPath}/manager/valicode" width="80px" height="35px" id="imgcode">
                                        </div>
                                    </li>
                                </ul>
                                <div class="space"></div>

                                <div class="clearfix">
                                    <label class="inline">
                                        <input type="checkbox" class="ace">
                                        <span class="lbl">保存密码</span>
                                    </label>

                                    <button type="button" class="width-35 pull-right btn btn-sm btn-primary" id="login_btn">
                                        <i class="icon-key"></i>
                                        登录
                                    </button>
                                </div>

                                <div class="space-4"></div>
                            </fieldset>
                        </form>

                        <div class="social-or-login center">
                            <span class="bigger-110">通知</span>
                        </div>

                        <div class="social-login center">
                            请使用IE8及以上版本的浏览器...
                        </div>
                    </div><!-- /widget-main -->

                    <div class="toolbar clearfix"></div>
                </div><!-- /widget-body -->
            </div><!-- /login-box -->
        </div><!-- /position-relative -->
    </div>
</div>
<div class="loginbm">版权所有 2021</div><strong></strong>
</body>
</html>
<script>

    //点击验证码刷新验证码
    $("#imgcode").click(function () {
        //验证码相同路径不会变
        $(this).attr("src","${pageContext.request.contextPath}/manager/valicode?datetime="+new Date())
    })

    $('#login_btn').on('click', function(){
        var num=0;
        var str="";
        $("input[type$='text'],input[type$='password']").each(function(n){
            if($(this).val()=="")
            {

                layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                    title: '提示框',
                    icon:0,
                });
                num++;
                return false;
            }
        });
        if(num>0){
            return false;
        }else{
            /*先检查验证码是否正确*/
            //ajax是异步的,函数不会等待ajax执行完才进行下一步，所以在最外层再打上一个false
            $.post("${pageContext.request.contextPath}/manager/vlicodecheck",null,function (e) {
                // alert(e.data);
                // var code=e.substring(0,4);
                var code=e.data;
                console.log(e)
                if ($("#imgcodetext").val()===code){
                    // alert("请求成功")
                    //判断成功就用jquery提交表单
                    // $("#myform").submit();
                    $.ajax({
                        type:"post",
                        url:"${pageContext.request.contextPath}/manager/logincheck",
                        contentType:"application/x-www-form-urlencoded",
                        dataType:"json",
                        data:{
                            "loginName":$("#username").val(),
                            "loginPwd":$("#userpwd").val()
                        },
                        success:function (e) {
                            if (e.code==200){
                                layer.alert('登录成功！',{
                                    title: '提示框',
                                    icon:1,
                                });
                                location.href="${pageContext.request.contextPath}/manager/index";
                                layer.close(index);
                            }else {
                                $("#codeinfo").css({"display":"none"})
                                $("#info").css({"display":"block"})
                            }
                        },
                        error:function () {
                            layer.alert("请求失败",{
                                title:'提示框'
                            });
                            window.location.href="${pageContext.request.contextPath}/manager/login";
                        }
                    })
                    // layer.alert('登录成功！',{
                    //     title: '提示框',
                    //     icon:1,
                    // });
                    <%--location.href="${pageContext.request.contextPath}/manager/index";--%>
                    <%--layer.close(index);--%>
                }else {
                    $("#codeinfo").css({"display":"block"})
                }
            },"json");  //第四个参数是预估返回数据的类型


        }


    });
    // $(document).ready(function(){
    //     $("input[type='text'],input[type='password']").blur(function(){
    //         var $el = $(this);
    //         var $parent = $el.parent();
    //         $parent.attr('class','frame_style').removeClass(' form_error');
    //         if($el.val()==''){
    //             $parent.attr('class','frame_style').addClass(' form_error');
    //         }
    //     });
    //     $("input[type='text'],input[type='password']").focus(function(){
    //         var $el = $(this);
    //         var $parent = $el.parent();
    //         $parent.attr('class','frame_style').removeClass(' form_errors');
    //         if($el.val()==''){
    //             $parent.attr('class','frame_style').addClass(' form_errors');
    //         } else{
    //             $parent.attr('class','frame_style').removeClass(' form_errors');
    //         }
    //     });
    // })

</script>
